<template>
  <!-- 当前连续记录  和  最大连续记录暂且不显示 -->
  <!-- 相遇天数等登录写后再完善 -->
  <div class="app-container">
    <div class="header-container">
      <div class="statistic-item">
        <div v-html="diarySvgCode" class="statistic-svgCode"></div>
        <div class="statistic-card">
          <el-statistic title="日记累计" :value="totalDiary">
            <template #suffix>
              <span style="font-size:16px;margin-left:5px;">篇</span>
            </template>
          </el-statistic>
        </div>
      </div>
      <div class="statistic-item">
        <div v-html="imgSvgCode" class="statistic-svgCode"></div>
        <div class="statistic-card">
          <el-statistic title="上传图片" :value="totalImage">
            <template #suffix>
              <span style="font-size:16px;margin-left:5px;">张</span>
            </template>
          </el-statistic>
        </div>
      </div>
      <div class="statistic-item">
        <div v-html="wordSvgCode" class="statistic-svgCode"></div>
        <div class="statistic-card">
          <el-statistic title="总字数" :value="totalWordCount">
            <template #suffix>
              <span style="font-size:16px;margin-left:5px;">字</span>
            </template>
          </el-statistic>
        </div>
      </div>
      <div class="statistic-item">
        <div v-html="daySvgCode" class="statistic-svgCode"></div>
        <div class="statistic-card">
          <el-statistic title="相遇" :value="totalDay">
            <template #suffix>
              <span style="font-size:16px;margin-left:5px;">天</span>
            </template>
          </el-statistic>
        </div>
      </div>
    </div>

    <div class="middle-container">
      <div class="calenderMain-area">
        <!-- <div class="calender-info">
          <span>
            当前连续记录
            <b style="color:#f08a5d;margin-right:3px">{{ currentContinuousRecore }}</b>天
          </span>
          <span style="margin-left:20px">
            最大连续记录
            <b style="color:#f08a5d;margin-right:3px">{{ maxContinuousRecore }}</b>天
          </span>
        </div>-->
        <div id="calenderMain" class="calenderMain"></div>
        <div class="year-select">
          <el-link
            @click="decreaseCalenderYear"
            :icon="CaretLeft"
            :underline="false"
            :disabled="calenderBeginYear<=registerYear"
          ></el-link>
          <span>
            {{ calenderBeginYear }}
            <i>-</i>
            {{ calenderEndYear }}
          </span>
          <el-link
            @click="addCalenderYear"
            :icon="CaretRight"
            :underline="false"
            :disabled="calenderBeginYear>=currentYear"
          ></el-link>
        </div>
      </div>
      <div class="graphic">
        <div id="graphicData" class="graphicData"></div>
      </div>
    </div>

    <div class="footer-container">
      <div style="display:flex;width:74.7%;justify-content:space-between">
        <div class="time-back">
          <div class="time-back-title">
            <span>时光回廊</span>
          </div>
          <el-timeline style="max-width: 600px">
            <el-scrollbar max-height="250px" class="timeline-scrollbar">
              <el-timeline-item
                v-for="(item, index) in frontPageList"
                :key="index"
                :timestamp="item.date.split(' ')[0]"
                placement="top"
                hollow
                type="primary"
              >
                <div class="diary-card">
                  <div class="diary-info">
                    <div class="diary-title" style="display:flex;">
                      <h4 style="margin:0;padding-bottom:5px">{{ item.title }}</h4>
                      <i v-html="modifySvgSize(item.moodSvgCode)" class="diary-svgCode"></i>
                    </div>
                    <span
                      style="font-size: 11px;color:#a8abb2;padding-bottom:5px"
                    >周六 • {{ item.date.split(" ")[1] }} • {{ item.weatherLabelName }} • {{ item.categoryLabelName }} • {{ item.location }}</span>
                  </div>
                  <div class="diary-img">
                    <el-image
                      style="width: 50px; height: 50px;border-radius: 5px;"
                      :src="getFirstImageUrl(item.attachUrl)"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      show-progress
                      :initial-index="4"
                      fit="cover"
                    />
                  </div>
                </div>
              </el-timeline-item>
            </el-scrollbar>
          </el-timeline>
        </div>
        <div class="memory-fragments">
          <div class="memory-fragments-title">
            <span>记忆碎片</span>
            <el-link :underline="false" class="img-refresh">
              <el-icon class="el-icon--right">
                <Refresh />
              </el-icon>
            </el-link>
          </div>
          <div class="memory-fragments-img">
            <div v-for="(item, index) in srcList" :key="index" class="image-container">
              <img :src="item.src" class="memory-img" />
              <div class="overlay">
                <span class="overlay-text">{{ item.date }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="walking-time">
        <div class="memory-fragments-title walking-time-title">
          <span>漫步时光</span>
          <el-link :underline="false" class="img-refresh">
            <el-icon class="el-icon--right">
              <Refresh />
            </el-icon>
          </el-link>
        </div>
        <div class="walking-time-diary">
          <span style="font-size: 12px;color:#a8abb2;">2025-09-09</span>
          <p
            class="walking-time-diary-content"
          >今天急急急急急急急急急解决快快快快快快快快快卡卡卡卡卡卡看看快快快快快快快快快卡卡卡看看快快快快快快快快快卡卡卡卡卡卡看看快快快快快快快快快卡卡卡卡卡卡看看快快快快快快快快快卡卡卡卡卡卡看卡看看快快快快快快快快快卡卡卡</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="FrontPage">
import { listDiary } from "@/api/diary/diary";
import * as echarts from "echarts";
import { CaretLeft, CaretRight, Refresh } from "@element-plus/icons-vue";
import { ref } from "vue";

const { proxy } = getCurrentInstance();
const frontPageList = ref([]);
const loading = ref(true);

// 统计卡片数据
const totalDiary = ref(0);
const totalImage = ref(0);
const totalWordCount = ref(0);
const totalDay = ref(0);

// 日历热力图数据
const seriesData = ref([]);
const maxWordCount = ref(2000);
const currentYear = new Date().getFullYear();
const registerYear = ref("2014");
const calenderBeginYear = ref(currentYear);
const calenderEndYear = ref(currentYear + 1);
// const currentContinuousRecore = ref(0);
// const maxContinuousRecore = ref(0);

// 今年数据
const currentMonthDiaryCnt = ref(0);
const currentMonthWordCnt = ref(0);

// 图片数组
const srcList = ref([]);

// 随机日记
const randomDiary = ref(null);

const getFirstImageUrl = attachUrl => {
  if (attachUrl) {
    const urls = attachUrl.split(",").map(url => url.trim());
    return urls.length > 0 ? urls[0] : "";
  }
};
const setRandomDiary = () => {
  if (frontPageList.value.length > 0) {
    const randomIndex = Math.floor(Math.random() * frontPageList.value.length);
    const randomItem = frontPageList.value[randomIndex];
    // 提取纯文本内容
    const extractTextFromHtml = html => {
      const hasHtmlTags = /<[^>]*>/g.test(html);
      if (hasHtmlTags) {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, "text/html");
        return doc.body.textContent || "";
      } else {
        return html;
      }
    };
    const newContentPreview = extractTextFromHtml(
      randomItem.contentPreview || ""
    );
    // 格式化日期
    const formatDate = dateString => {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从0开始，需要加1
      const day = date.getDate();
      return `${year} 年 ${month} 月 ${day} 日`;
    };
    const formattedDate = formatDate(randomItem.date);
    // 创建一个新的对象，包含提取的纯文本内容和格式化后的日期
    randomDiary.value = {
      ...randomItem,
      newContentPreview: newContentPreview,
      formattedDate: formattedDate
    };
  } else {
    randomDiary.value = null;
  }
};

const diarySvgCode = ref(
  '<svg t="1740387635521" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1486" width="30" height="30"><path d="M179.251 423.834h76.493a34.765 34.765 0 0 0 0-69.53h-76.493a34.765 34.765 0 0 0 0 69.53z" fill="#8486F8" p-id="1487"></path><path d="M770.15 127.078H292.762c-47.821 0-86.58 38.759-86.58 86.58v99.328h49.613c42.035 0 76.083 34.048 76.083 76.083s-34.048 76.083-76.083 76.083h-49.613V590.49h49.613c42.035 0 76.083 34.048 76.083 76.083s-34.048 76.083-76.083 76.083h-49.613v79.309c0 47.82 38.759 86.579 86.58 86.579H770.15c47.821 0 86.58-38.758 86.58-86.58V213.659c0.05-47.821-38.759-86.58-86.58-86.58z m-102.092 442.42c-30.72 33.945-67.738 60.313-104.5 86.937-12.646 9.165-27.29 8.397-40.806-1.638-21.555-16.077-42.957-32.359-63.898-49.203-20.326-16.333-38.81-34.663-54.067-56.064-30.003-42.036-29.133-100.813 2.919-140.032 18.278-22.324 42.65-31.744 71.372-30.618 24.013 0.973 44.903 9.011 61.799 26.522a47.89 47.89 0 0 0 2.355 2.201c0.307 0.256 0.768 0.359 1.843 0.82 13.005-13.261 27.597-23.45 46.08-27.188 58.88-11.878 100.301 21.197 111.975 74.138 9.728 44.493-5.53 81.51-35.072 114.125z" fill="#6C6CEA" p-id="1488"></path><path d="M290.56 666.624a34.765 34.765 0 0 0-34.765-34.765h-76.544a34.765 34.765 0 0 0 0 69.53h76.493c19.251 0 34.816-15.565 34.816-34.765z" fill="#757BF2" p-id="1489"></path><path d="M856.78 411.392V213.658c0-47.821-38.758-86.58-86.578-86.58h-477.44c-47.821 0-86.58 38.759-86.58 86.58v99.328h49.613c42.035 0 76.083 34.048 76.083 76.083s-34.048 76.083-76.083 76.083h-49.613V590.49h49.613c42.035 0 76.083 34.048 76.083 76.083s-34.048 76.083-76.083 76.083h-49.613v79.309c0 22.067 8.346 42.137 21.914 57.446 18.125 1.69 36.454 2.611 54.989 2.611 283.955 0.052 520.601-202.29 573.696-470.63z m-449.023-1.894c18.278-22.324 42.65-31.744 71.373-30.618 24.012 0.973 44.902 9.011 61.798 26.522a47.89 47.89 0 0 0 2.355 2.201c0.307 0.256 0.768 0.359 1.843 0.82 13.005-13.261 27.597-23.45 46.08-27.188 58.88-11.878 100.301 21.197 111.975 74.138 9.779 44.493-5.53 81.51-35.021 114.073-30.72 33.946-67.738 60.314-104.5 86.938-12.646 9.165-27.289 8.397-40.806-1.638-21.555-16.077-42.956-32.359-63.897-49.204-20.327-16.332-38.81-34.662-54.067-56.064-30.055-41.932-29.236-100.761 2.867-139.98z" fill="#757BF2" p-id="1490"></path><path d="M292.762 127.078c-47.821 0-86.58 38.759-86.58 86.58v99.328h49.613c42.035 0 76.083 34.048 76.083 76.083s-34.048 76.083-76.083 76.083h-49.613V590.49h49.613c31.949 0 59.239 19.712 70.503 47.564a580.339 580.339 0 0 0 108.697-53.76c-10.957-10.7-21.197-22.17-30.208-34.764-30.003-42.036-29.133-100.813 2.919-140.032 18.278-22.324 42.65-31.744 71.372-30.618 24.013 0.973 44.903 9.011 61.799 26.522a47.89 47.89 0 0 0 2.355 2.201c0.307 0.256 0.768 0.359 1.843 0.82 13.005-13.261 27.597-23.45 46.08-27.188 14.285-2.867 27.495-3.072 39.527-1.024 43.264-75.417 70.195-161.433 76.032-253.184H292.762z" fill="#8486F8" p-id="1491"></path><path d="M206.182 213.658v99.328h49.613c29.133 0 54.426 16.384 67.175 40.396 79.052-58.368 142.899-136.14 184.422-226.304h-214.63c-47.821 0-86.58 38.759-86.58 86.58z m49.613 140.646h-76.544a34.765 34.765 0 0 0-34.765 34.765c0 8.96 3.482 16.998 9.012 23.142 60.825-9.011 105.267-25.344 133.324-38.553-5.683-11.418-17.408-19.354-31.027-19.354z" fill="#8D92F8" p-id="1492"></path><path d="M255.795 631.808h-76.544a34.765 34.765 0 0 0-34.765 34.765c0 3.328 0.615 6.502 1.485 9.523 60.57-5.632 109.21-16.64 140.595-25.344-5.734-11.162-17.305-18.944-30.77-18.944z" fill="#8486F8" p-id="1493"></path></svg>'
);
const imgSvgCode = ref(
  '<svg t="1740393686502" class="icon" viewBox="0 0 1426 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1486" width="30" height="30"><path d="M241.01111082 62h960.00000028c65.99999971 0 119.99999971 54 119.99999972 119.99999971v660.00000058c0 65.99999971-54 119.99999971-119.99999972 119.99999971h-960.00000028c-65.99999971 0-119.99999971-54-119.99999972-119.99999971V181.99999971c0-65.99999971 54-119.99999971 119.99999972-119.99999971z" fill="#4ade80" p-id="1487" data-spm-anchor-id="a313x.manage_type_mylikes.0.i0.3fb13a81ElExCZ" class="selected"></path><path d="M331.01111082 271.99999971m-90 0a90 90 0 1 0 180 0 90 90 0 1 0-180 0Z" fill="#ffffff" p-id="1488" data-spm-anchor-id="a313x.manage_type_mylikes.0.i2.3fb13a81ElExCZ" class=""></path><path d="M1321.01111082 748.99999971v-74.99999971L1052.5111111 446.00000029c-11.99999971-9-29.99999971-9-38.99999971 1.49999942L736.01111082 723.5 503.5111111 566c-7.49999971-7.49999971-18-10.50000029-28.50000028-7.49999971L131.51111139 737c-4.5 1.50000029-7.49999971 2.99999971-10.50000029 4.5v49.5c6.00000029 4.5 15.00000029 7.49999971 24.00000029 4.5l325.49999943-173.99999971 243 166.5c6.00000029 6.00000029 13.5 9 21.00000057 9s15.00000029-2.99999971 20.99999971-9l279-279 277.49999972 235.49999942c2.99999971 2.99999971 6.00000029 4.5 9 4.5z" fill="#ffffff" p-id="1489" data-spm-anchor-id="a313x.manage_type_mylikes.0.i1.3fb13a81ElExCZ" class=""></path></svg>'
);
const wordSvgCode = ref(
  '<svg t="1740393785141" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1842" width="30" height="30"><path d="M681.353846 691.2c9.846154 0 19.692308 3.938462 23.630769 13.784615 5.907692 7.876923 5.907692 17.723077 1.969231 27.569231-3.938462 9.846154-13.784615 15.753846-25.6 15.753846h-177.230769c-13.784615 0-27.569231-9.846154-29.538462-23.630769-1.969231-15.753846 7.876923-29.538462 23.63077-31.507692l-51.2-129.969231h-236.307693L157.538462 693.169231c7.876923 1.969231 13.784615 5.907692 17.723076 11.815384 3.938462 5.907692 5.907692 13.784615 5.907693 19.692308-1.969231 13.784615-15.753846 23.630769-29.538462 23.630769H68.923077c-9.846154 0-19.692308-5.907692-23.630769-13.784615s-5.907692-17.723077-1.969231-27.569231c3.938462-9.846154 13.784615-15.753846 25.6-15.753846h19.692308L346.584615 57.107692c5.907692-11.815385 15.753846-17.723077 27.569231-17.723077s21.661538 5.907692 27.569231 17.723077l261.907692 634.092308h17.723077zM324.923077 295.384615L236.307692 512h177.23077l-88.615385-216.615385z" p-id="1843" fill="#fb923c"></path><path d="M974.769231 610.461538c-126.030769 80.738462-216.615385 183.138462-257.969231 234.338462l-100.430769-82.707692-45.292308 37.415384 173.292308 185.107693c29.538462-80.738462 124.061538-236.307692 240.246154-348.553847l-9.846154-25.6z" fill="#fb923c" p-id="1844"></path></svg>'
);
const daySvgCode = ref(
  '<svg t="1740393894246" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2483" width="30" height="30"><path d="M514.56 971.264c-19.968 0-39.936-1.536-59.392-4.096-2.56-0.512-4.608-0.512-7.168-0.512H445.44c-99.328-14.336-188.416-58.88-258.56-129.024C99.328 750.08 51.2 634.368 51.2 512c0-72.704 16.384-142.336 49.152-207.36 2.56-4.608 4.096-10.24 4.608-15.36C138.24 229.376 180.736 179.2 228.864 143.872l1.024-1.024c50.176-38.912 112.128-67.584 178.688-81.92h1.024c3.072 0 6.144-0.512 8.704-1.024 34.304-6.144 66.048-8.704 97.28-8.704 17.92 0 36.352 1.024 54.272 3.072 2.048 0 3.584 0.512 5.632 0.512h0.512c44.032 5.12 90.112 19.456 141.312 43.008 4.608 2.048 9.216 3.584 14.336 4.096 59.904 32.768 110.08 75.776 145.408 123.904l1.024 1.024c38.4 49.152 67.072 109.568 84.992 179.712 0 3.584 0.512 7.168 1.024 10.24 13.824 67.072 11.776 139.264-6.144 214.016-30.72 119.296-107.008 217.6-215.04 278.016-71.68 40.96-151.04 62.464-228.352 62.464z" fill="#FFFFFF" p-id="2484"></path><path d="M515.584 0v102.4c16.384 0 32.768 1.024 48.64 2.56 2.56 0.512 5.12 0.512 8.192 0.512 37.888 4.608 78.336 17.408 123.392 38.4 5.632 2.56 11.776 4.608 17.408 6.144 50.688 28.672 92.672 65.024 122.368 105.472 0.512 0.512 1.024 1.536 1.536 2.048 32.768 41.984 58.368 95.744 74.752 156.16 0.512 4.608 1.024 8.704 2.048 12.8 12.288 59.392 10.752 123.904-5.632 190.976-27.136 104.96-94.72 192.512-190.464 245.248l-0.512 0.512c-64 36.352-134.144 55.296-202.752 55.296-17.408 0-34.816-1.024-52.224-3.584-4.608-0.512-8.704-1.024-13.312-1.024-87.04-13.312-164.864-52.736-226.304-114.176C145.408 723.456 102.4 621.056 102.4 512c0-64.512 14.848-126.976 43.52-184.832 3.072-6.656 5.632-13.312 7.68-19.968 28.672-50.688 65.024-92.672 105.472-122.368 0.512-0.512 1.536-1.024 2.048-1.536 43.008-33.28 95.744-57.856 153.6-71.168 4.096 0 8.192-0.512 12.288-1.536 31.232-5.632 59.904-8.192 88.576-8.192V0m0 0c-35.84 0-71.168 3.584-105.984 9.728h-6.144C326.144 25.6 256 57.856 198.144 102.4c-60.928 44.544-108.544 105.472-143.872 172.544V281.6C18.944 352.256 0 429.056 0 512c0 140.8 57.344 268.8 150.528 361.472 76.8 76.8 176.128 128 291.328 143.872h6.144c22.016 3.072 44.544 4.608 66.56 4.608 89.088 0 176.64-25.088 253.44-68.608 115.2-64 204.8-172.544 240.128-310.272 18.944-79.872 22.528-159.744 6.144-236.544v-6.144c-18.944-76.8-51.2-146.944-95.744-204.8-44.544-60.928-105.472-108.544-172.544-143.872h-6.144c-48.128-22.528-102.4-41.472-159.744-48.128h-3.072c-21.504-2.56-41.472-3.584-61.44-3.584z" fill="#6AADFF" p-id="2485"></path><path d="M271.872 271.872l9.728-9.216-32.256-32.256-12.8 9.728zM752.128 271.872l9.216 9.728 35.328-35.328-9.728-9.216-34.816 34.816zM742.20032 761.7536l9.7792-9.77408 35.11296 35.1232-9.77408 9.76896zM227.38432 777.728l35.1232-35.1232 9.76896 9.7792-35.11296 35.11808zM489.472 793.6h31.744v105.472h-31.744zM489.472 131.072h31.744v105.472h-31.744zM783.872 499.2h105.472v35.328h-105.472zM121.344 499.2h105.472v35.328H121.344z" fill="#6AADFF" p-id="2486"></path><path d="M515.072 432.128c-9.728 0-15.872 0-22.528 3.072-41.472-86.528-92.672-166.4-150.528-246.272-12.8 6.144-25.6 15.872-38.4 22.528 41.472 92.672 89.6 176.128 150.528 256-9.728 12.8-12.8 28.672-12.8 44.544 0 44.544 35.328 79.872 79.872 79.872s79.872-35.328 79.872-79.872v-15.872c48.128-41.472 92.672-92.672 131.072-150.528-12.8-12.8-25.6-22.528-38.4-35.328-51.2 38.4-95.744 82.944-137.728 131.072-15.36-6.144-28.16-9.216-40.96-9.216z" fill="#FF9B0B" p-id="2487"></path></svg>'
);

let myCalenderChart = null;
let myGraphicChart = null;
function generateCalender() {
  const chartDom = document.getElementById("calenderMain");
  // 如果已经存在 ECharts 实例，则先销毁
  if (myCalenderChart) {
    myCalenderChart.dispose();
  }
  myCalenderChart = echarts.init(chartDom);

  // 生成所有可能的日期范围
  // JavaScript 中，Date 对象的构造函数里月份参数是从 0 开始计数的，0代表1月，11代表12月
  const startDate = new Date(calenderBeginYear.value, 0, 1);
  const endDate = new Date(calenderEndYear.value, 11, 31);
  const allDates = [];
  for (
    let date = new Date(startDate);
    date <= endDate;
    date.setDate(date.getDate() + 1)
  ) {
    allDates.push(date.toISOString().split("T")[0]);
  }
  // 确保所有日期都在 seriesData.value 中有对应项
  const updatedSeriesData = allDates.map(date => {
    const existingData = seriesData.value.find(item => item[0] === date);
    return existingData || [date, 0];
  });

  const option = {
    tooltip: {
      position: "top",
      formatter: function(params) {
        // params 是一个包含数据信息的对象
        // console.log(params);
        const date = params.data[0];
        const wordCount = params.data[1];
        return `${wordCount} words on ${date}`;
      },
      textStyle: {
        fontSize: 10,
        fontWeight: "bold"
      },
      padding: [3, 10],
      confine: true
    },
    visualMap: {
      min: 0,
      max: maxWordCount.value,
      calculable: true,
      orient: "horizontal",
      left: "center",
      top: "top",
      text: ["More", "Less"],
      itemWidth: 10,
      inRange: {
        // color: ["#eeeeee", "#e8ffe8", "#a6fff2", "#74f9ff", "#00e0ff"]
        color: ["#eeeeee", "#E5FFF2", "#99FFCC", "#00FF80", "#00BD00"]
      },
      textStyle: {
        fontSize: 8
      },
      top: 20,
      left: "center"
    },
    calendar: {
      range: calenderBeginYear.value,
      cellSize: ["auto", 18],
      left: "center",
      yearLabel: {
        show: false
      },
      monthLabel: {
        position: "end",
        margin: 10
      },
      itemStyle: {
        color: "#eeeeee",
        borderWidth: 6,
        borderColor: "#fff"
      },
      splitLine: {
        show: true,
        lineStyle: {
          width: 3,
          color: "#E5F2FF"
        }
      },
      dayLabel: {
        show: false
      }
    },
    series: [
      {
        type: "heatmap",
        coordinateSystem: "calendar",
        calendarIndex: 0,
        data: updatedSeriesData
      }
    ]
  };
  console.log("Range:", option.calendar.range);
  option && myCalenderChart.setOption(option);
}

// 初始化 srcList
const initializeSrcList = () => {
  srcList.value = [];
  frontPageList.value.forEach(item => {
    if (item.attachUrl) {
      const urls = item.attachUrl.split(",").map(url => url.trim());
      const date = item.date.split(" ")[0]; // 提取日期部分
      urls.forEach(url => {
        srcList.value.push({
          src: url,
          date: date
        });
      });
    }
  });
  console.log("srcList:", srcList.value);
};

function generateGraphicData() {
  const chartDom = document.getElementById("graphicData");
  if (myGraphicChart) {
    myGraphicChart.dispose();
  }
  myGraphicChart = echarts.init(chartDom);

  // 计算 currentMonthDiaryCnt 的最大值和 interval
  const maxDiaryCnt = Math.max(...currentMonthDiaryCnt.value) + 5;
  const intervalDiaryCnt = maxDiaryCnt / 5;

  // 计算 currentMonthWordCnt 的最大值和 interval
  const maxWordCnt = Math.max(...currentMonthWordCnt.value) + 1000;
  const intervalWordCnt = maxWordCnt / 5;

  const option = {
    title: {
      text: "今年数据",
      textStyle: {
        fontSize: 14
      }
    },
    legend: {
      data: ["日记篇数", "字数"],
      bottom: 26,
      itemWidth: 12,
      itemHeight: 6,
      textStyle: {
        fontSize: 10
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      textStyle: {
        fontSize: 12
      }
    },
    toolbox: {
      itemSize: 10,
      feature: {
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    xAxis: [
      {
        type: "category",
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        axisLabel: {
          fontSize: 10,
          margin: 5
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        max: maxDiaryCnt,
        interval: intervalDiaryCnt,
        axisLabel: {
          show: false
        }
      },
      {
        type: "value",
        min: 0,
        max: maxWordCnt,
        interval: intervalWordCnt,
        axisLabel: {
          show: false
        }
      }
    ],
    series: [
      {
        name: "日记篇数",
        type: "bar",
        tooltip: {
          valueFormatter: function(value) {
            return value;
          }
        },
        data: currentMonthDiaryCnt.value
      },
      {
        name: "字数",
        type: "line",
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function(value) {
            return value;
          }
        },
        data: currentMonthWordCnt.value
      }
    ]
  };
  option && myGraphicChart.setOption(option);
}

/** 查询首页列表 */
// 改动，查询全部数据
function getList() {
  loading.value = true;
  listDiary(queryParams.value).then(response => {
    frontPageList.value = response.rows;
    // 统计卡片数据赋值
    totalDiary.value = response.total;
    totalImage.value = frontPageList.value.reduce((acc, item) => {
      if (item.attachUrl) {
        const urls = item.attachUrl.split(",").map(url => url.trim());
        return acc + urls.length;
      }
      return acc;
    }, 0);
    totalWordCount.value = frontPageList.value.reduce(
      (acc, item) => acc + item.wordCount,
      0
    );
    // 日历热力图数据构建
    seriesData.value = frontPageList.value.map(item => [
      item.date.split(" ")[0],
      item.wordCount
    ]);
    maxWordCount.value = Math.max(
      ...frontPageList.value.map(item => item.wordCount)
    );
    // 今年每月日记篇数和字数赋值
    currentMonthDiaryCnt.value = Array(12).fill(0);
    currentMonthWordCnt.value = Array(12).fill(0);
    const currentYearDiaries = frontPageList.value.filter(item => {
      const year = new Date(item.date).getFullYear();
      return year === new Date().getFullYear();
    });
    currentYearDiaries.forEach(item => {
      const month = new Date(item.date).getMonth(); // getMonth() 返回 0-11
      currentMonthDiaryCnt.value[month]++;
      currentMonthWordCnt.value[month] += item.wordCount;
    });
    // 图片数组赋值
    initializeSrcList();
    // 随机日记赋值
    setRandomDiary();
    console.log(seriesData.value);
    loading.value = false;
    generateCalender();
    generateGraphicData();
  });
}

function modifySvgSize(svgCode) {
  const parser = new DOMParser();
  const svgDoc = parser.parseFromString(svgCode, "image/svg+xml");
  const svgElement = svgDoc.querySelector("svg");

  if (!svgElement) {
    console.error("Invalid SVG code provided.");
    return svgCode;
  }

  svgElement.setAttribute("width", "18");
  svgElement.setAttribute("height", "18");

  return new XMLSerializer().serializeToString(svgElement);
}

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userId: null,
    date: null,
    mood: null,
    title: null,
    contentPreview: null,
    wordCount: null,
    location: null,
    weather: null,
    categoryId: null
  },
  rules: {}
});

const { queryParams, form, rules } = toRefs(data);
/** 日历年份加一操作:标签中定义了年份增加到当前年份时链接按钮失效 */
function addCalenderYear() {
  calenderBeginYear.value += 1;
  calenderEndYear.value += 1;
  generateCalender();
}
/** 日历年份减一操作:标签中定义了年份减少到注册年份时链接按钮失效  */
function decreaseCalenderYear() {
  calenderBeginYear.value -= 1;
  calenderEndYear.value -= 1;
  generateCalender();
}

// // 取消按钮
// function cancel() {
//   open.value = false;
//   reset();
// }

// // 表单重置
// function reset() {
//   form.value = {
//     id: null,
//     userId: null,
//     date: null,
//     mood: null,
//     title: null,
//     contentPreview: null,
//     wordCount: null,
//     location: null,
//     weather: null,
//     categoryId: null,
//     createBy: null,
//     createTime: null,
//     updateBy: null,
//     updateTime: null,
//     remark: null
//   };
//   proxy.resetForm("frontPageRef");
// }

// /** 搜索按钮操作 */
// function handleQuery() {
//   queryParams.value.pageNum = 1;
//   getList();
// }

// /** 重置按钮操作 */
// function resetQuery() {
//   proxy.resetForm("queryRef");
//   handleQuery();
// }

// // 多选框选中数据
// function handleSelectionChange(selection) {
//   ids.value = selection.map(item => item.id);
//   single.value = selection.length != 1;
//   multiple.value = !selection.length;
// }

// /** 新增按钮操作 */
// function handleAdd() {
//   reset();
//   open.value = true;
//   title.value = "添加首页";
// }

// /** 修改按钮操作 */
// function handleUpdate(row) {
//   reset();
//   const _id = row.id || ids.value;
//   getFrontPage(_id).then(response => {
//     form.value = response.data;
//     open.value = true;
//     title.value = "修改首页";
//   });
// }

// /** 提交按钮 */
// function submitForm() {
//   proxy.$refs["frontPageRef"].validate(valid => {
//     if (valid) {
//       if (form.value.id != null) {
//         updateFrontPage(form.value).then(response => {
//           proxy.$modal.msgSuccess("修改成功");
//           open.value = false;
//           getList();
//         });
//       } else {
//         addFrontPage(form.value).then(response => {
//           proxy.$modal.msgSuccess("新增成功");
//           open.value = false;
//           getList();
//         });
//       }
//     }
//   });
// }

// /** 删除按钮操作 */
// function handleDelete(row) {
//   const _ids = row.id || ids.value;
//   proxy.$modal
//     .confirm('是否确认删除首页编号为"' + _ids + '"的数据项？')
//     .then(function() {
//       return delFrontPage(_ids);
//     })
//     .then(() => {
//       getList();
//       proxy.$modal.msgSuccess("删除成功");
//     })
//     .catch(() => {});
// }

// /** 导出按钮操作 */
// function handleExport() {
//   proxy.download(
//     "frontPage/frontPage/export",
//     {
//       ...queryParams.value
//     },
//     `frontPage_${new Date().getTime()}.xlsx`
//   );
// }

getList();
</script>

<style scoped>
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.statistic-item {
  display: flex;
  align-items: center;
  background-color: #f9fafb;
  width: 24%;
  box-sizing: border-box;
  justify-content: center;
}
.el-statistic {
  --el-statistic-content-font-size: 28px;
}
.statistic-svgCode {
  vertical-align: middle;
  margin-right: 5px;
}
.statistic-card {
  height: 100%;
  padding: 20px;
}

.middle-container {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}
.calenderMain-area {
  position: relative;
  width: 74.7%;
  height: 220px;
  background-color: #f9fafb;
  padding: 0 18px;
}
.graphic {
  background-color: #f9fafb;
  width: 24%;
  height: 220px;
  padding: 20px 15px 10px 15px;
}
.calender-info {
  position: absolute;
  top: 21px;
  z-index: 1;
  font-size: 14px;
}
.calenderMain {
  position: absolute;
  width: 96%;
  height: 220px;
}
.year-select {
  position: absolute;
  display: flex;
  top: 24px;
  right: 18px;
  align-items: center;
  font-size: 14px;
  z-index: 1;
}
.graphicData {
  widows: 100%;
  height: 220px;
}

.footer-container {
  display: flex;
  margin-top: 16px;
  justify-content: space-between;
}
.time-back {
  width: 49%;
  background-color: #f9fafb;
  height: 285px;
}
.diary-info {
  width: 75%;
}
.diary-img[data-v-6d810147] {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: end;
  border: 5px;
}
.time-back-title {
  font-size: 14px;
  font-weight: bolder;
  color: #333;
  margin: 15px 18px 10px 18px;
}
.diary-card {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px 15px 20px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  background-color: #ffffff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
}
.diary-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.diary-svgCode {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.el-timeline {
  padding-left: 18px;
}
.el-timeline-item {
  padding-bottom: 11px;
}
:deep(.el-scrollbar__view) {
  padding: 0px 18px 10px 1px !important;
}

.memory-fragments {
  width: 49%;
  background-color: #f9fafb;
  height: 285px;
}
.memory-fragments-title {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bolder;
  color: #333;
  margin: 15px 18px 10px 18px;
}
.img-refresh {
  font-size: 12px;
}
.memory-fragments-img {
  padding: 10px 18px 20px 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px; /* 图片之间的间距 */
}
.image-container {
  position: relative;
  height: 100px;
  overflow: hidden;
}
.memory-img {
  width: 100%;
  height: 100px;
  border-radius: 5px;
  transition: opacity 0.3s ease;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 5px;
}
.image-container:hover .overlay {
  opacity: 1;
}
.overlay-text {
  font-size: 14px;
  font-weight: bold;
}

.walking-time {
  background-color: #f9fafb;
  width: 24%;
  padding: 20px 18px;
}
.walking-time-title {
  margin: 0 0 10px 0;
}
.walking-time-diary {
  border-radius: 5px;
  background-color: #fff;
  padding: 20px;
  height: 215px;
}
p.walking-time-diary-content {
  margin-top: 10px;
  color: rgb(105 105 105);
  font-size: 14px;
  line-height: 1.5em;
  height: 150px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  text-overflow: ellipsis;
  letter-spacing: 1px;
  text-indent: 2em;
}
</style>
